// JavaScript Document
var scale =0.7, minScale;
var scale0;
var xOffset = 0, yOffset =0;
var imageObj,imgCheckpoint,imgCheckpoint2;
var checkpointX = 0.80;
var checkpointY = 0.52;
var xOffsetC;
var yOffsetC;
var xRange = 0.025495;
var yRange = -0.018346;
var checkpointscale = 1;
var checkpointdiff = 0;
var checkpointdiff2 = 0;
var ongoingTouches = new Array;
var isScale=false;
var i=300;
var sx, sxx, sy, syy;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var timeout = 0;
var currentCP;
map={
	init:function(){
		//map.canvas.style.border = "5px inset brown";
		
		canvas.width = 300;
		canvas.height = 300;
		canvas.id = "campusMap";
		var compassDiv = document.getElementById("map");
		compassDiv.appendChild(canvas);
		imageObj = new Image();
		imageObj.src = "http://www.prism.gatech.edu/~xxie37/aro/Map/campus_map2.jpg";
		imgCheckpoint = new Image();
		imgCheckpoint.src = "http://www.prism.gatech.edu/~xxie37/aro/Map/Point1.png";
		imgCheckpoint2 = new Image();
		imgCheckpoint2.src = "http://www.prism.gatech.edu/~xxie37/aro/Map/Point2.png";
		minScale = 300/imageObj.width;
		checkMapManipulation();	
		currentCP = checkPoints.checkPointsList[0];
		showImg();
		
	},
	showMap: function(){
		/*
		map.canvas.style.border = "5px inset brown";
		var context = map.canvas.getContext('2d');
		var imageObj = new Image();
		imageObj.src = "http://www.prism.gatech.edu/~xxie37/ar/campus_map.jpg";
        imageObj.onload = function() {
       		context.drawImage(imageObj, 0, 0, 300, 300 * imageObj.height / imageObj.width );
        };*/
		showImg();		
	},
	clearMap:function(){
		var context = canvas.getContext('2d');
		context.clearRect ( 0 , 0 , 300 , 300 );
		canvas.style.border = "none";
	},
	render:function(){
		if(timeout != 0){
			timeout -- ;
		}
		showImg();

		//console.log("a");
	},
};

function showImg(){
	var lat   = ARGON.geolocation.getLLA().latitude;
	var lon   = ARGON.geolocation.getLLA().longitude;
	var alt   = ARGON.geolocation.utm.altitude;
	var xRatio = (lon + 84.410301) /xRange;
	var yRatio = (lat - 33.786438) /yRange;
	var clon = currentCP.longitude;//
	var clat = currentCP.latitude;//
	//var clat = checkPoints.checkPointsList[myApp.objInd].latitude;
	checkpointX = (clon + 84.410301) /xRange;
	checkpointY = (clat - 33.786438) /yRange;
	
	checkpointscale+= checkpointdiff;
	xOffsetC = xOffset + imageObj.width * scale * checkpointX - 30*checkpointscale/2;
	yOffsetC = yOffset + imageObj.height * scale * checkpointY - 30*checkpointscale/2;
	xOffsetC2 = xOffset + imageObj.width * scale * xRatio - 30*checkpointscale/2;
	yOffsetC2 = yOffset + imageObj.height * scale * yRatio - 30*checkpointscale/2;
	if(checkpointscale>1.5)
	{
		checkpointdiff = -0.02;
	}
	if(checkpointscale<1.01)
	{
		checkpointdiff = 0.02;
	}
	
	canvas.style.border = "3px inset yellow";
	
	context.clearRect ( 0 , 0 , 300 , 300 );
	context.drawImage(imageObj, xOffset, yOffset, imageObj.width*scale, imageObj.height*scale );
	context.drawImage(imgCheckpoint, xOffsetC, yOffsetC, 30*checkpointscale,30*checkpointscale);
	context.drawImage(imgCheckpoint2, xOffsetC2, yOffsetC2, 30*checkpointscale,30*checkpointscale);
}
function checkMapManipulation() {
	 $('div.map').each(function(index, frame) {
		var x, y, xx, yy;
		frame.addEventListener('touchstart', function(event) {
		  
		  var touches = event.changedTouches;
		  var touch = event.targetTouches[0];
		  x = touch.pageX;
		  y = touch.pageY;
		  
		  if(touches.length==1) {isScale=false;sx=event.targetTouches[0].pageX; sy=event.targetTouches[0].pageY; sxx=event.targetTouches[1].pageX; syy=event.targetTouches[1].pageY; scale0 = scale;}
		  if(touches.length==2) { isScale=true; sx=event.targetTouches[0].pageX; sy=event.targetTouches[0].pageY; sxx=event.targetTouches[1].pageX; syy=event.targetTouches[1].pageY;scale0 = scale;}
		});
		frame.addEventListener('doubletap', function(event) {
			scale = minScale;
			showImg();
		});
		frame.addEventListener('touchmove', function(event) {
		  var touches = event.changedTouches;
		  if(touches.length==1 && timeout ==0) {
			  var touch = event.targetTouches[0];
			  
			  var diffX = touch.pageX - x + xOffset;
			  var diffY = touch.pageY - y + yOffset;

			  x = touch.pageX;
			  y = touch.pageY;
			 
			  xOffset = diffX;
			  yOffset = diffY;
			  if(xOffset>0) xOffset =0;
			  if(yOffset>0) yOffset = 0;
			  if(xOffset<300-imageObj.width*scale) xOffset =300-imageObj.width*scale;
			  if(yOffset<300-imageObj.height*scale) yOffset = 300-imageObj.height*scale;
			  showImg();
		  }
		  else{
			  if(touches.length==2){
				  x = event.targetTouches[0].pageX;
				  y = event.targetTouches[0].pageY;
				  xx = event.targetTouches[1].pageX;
				  yy = event.targetTouches[1].pageY;
				  var dis = (xx-x)*(xx-x)+(yy-y)*(yy-y);
				  var sdis = (sxx-sx)*(sxx-sx)+(syy-sy)*(syy-sy);
				  var ddis = dis-sdis;
				  var posX = (sx+sxx)/2;
				  var posY = (sy+syy)/2;
				  var imgX = posX*scale+xOffset;
				  var imgY = posY*scale+yOffset;
				  
				  var ratio = ddis/(400*400);
				  scale = scale0 + ratio;
				  if(scale<minScale) scale=minScale;
				  if(scale>2) scale=2;
				  //log("two"+scale);
				  xOffset = imgX-posX*scale;
				  yOffset = imgY-posY*scale;
				  if(xOffset>0) xOffset =0;
			  	if(yOffset>0) yOffset = 0;
			 	if(xOffset<300-imageObj.width*scale) xOffset =300-imageObj.width*scale;
			  	if(yOffset<300-imageObj.height*scale) yOffset = 300-imageObj.height*scale;
				  timeout =1;
				  showImg();
			  }
		  };
		  event.preventDefault();
		  event.stopPropagation();
		});
	
	  });
}

